<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var btns=document.getElementsByTagName('button');
            var imgs=document.images;
            btns[0].onclick=function(){
                id=setInterval(clock,1000);
            }
            btns[1].onclick=function(){
                clearInterval(id);
            }
            function clock(){
                //获取当前时间
                var today=new Date();
                var hour=handler(today.getHours());
                var min=handler(today.getMinutes());
                var sec=handler(today.getSeconds());
                var str=hour+min+sec;
                // console.log(str);
                //对应图片
                for(var i=0;i<imgs.length;i++){
                    imgs[i].src='./images/'+str.charAt(i)+'.png';
                }
            }
            // clock();
            function handler(num){
                if(num>=10){
                    return num+''
                }else{
                    return '0'+num 
                }
            }
        }
    </script>
</head>
<body>
    <button>跟进时间</button>
    <button>停止跟进</button>
    <br>
    <img src="./images/0.png" alt="">
    <img src="./images/0.png" alt="">时
    <img src="./images/0.png" alt="">
    <img src="./images/0.png" alt="">分
    <img src="./images/0.png" alt="">
    <img src="./images/0.png" alt="">秒
</body>
</html>